<template>
  <div class="members-points">
    <h3>积分明细</h3>

    <!-- 积分统计 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>积分统计</span>
        </div>
      </template>
      <p><strong>当前总积分：</strong>{{ totalPoints }}</p>
      <p><strong>积分有效期：</strong>{{ pointsValidity }}</p>
    </el-card>

    <!-- 积分记录列表 -->
    <el-table :data="pointsRecords" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="type" label="变动类型" width="180"></el-table-column>
      <el-table-column prop="points" label="变动积分" width="180"></el-table-column>
      <el-table-column prop="time" label="变动时间" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleView(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看积分详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="积分变动详情" width="40%">
      <div v-if="selectedRecord" class="record-detail">
        <p><strong>变动类型：</strong>{{ selectedRecord.type }}</p>
        <p><strong>变动积分：</strong>{{ selectedRecord.points }}</p>
        <p><strong>变动时间：</strong>{{ selectedRecord.time }}</p>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 积分数据
const totalPoints = ref(1000)
const pointsValidity = ref('2024-12-31')

// 积分记录
const pointsRecords = ref([
  {
    type: '购物获得',
    points: '+100',
    time: '2023-01-01 10:00:00'
  },
  {
    type: '签到获得',
    points: '+50',
    time: '2023-01-02 09:30:00'
  },
  {
    type: '兑换消耗',
    points: '-200',
    time: '2023-01-03 15:45:00'
  }
])

// 弹窗控制
const dialogVisible = ref(false)
const selectedRecord = ref(null)

// 打开弹窗并设置当前记录
const handleView = (row) => {
  selectedRecord.value = row
  dialogVisible.value = true
}
</script>

<style scoped>
.record-detail p {
  margin-bottom: 10px;
  font-size: 14px;
}
</style>